<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <!-- <a-page-header title="返回" @back="() => $router.go(-1)" /> -->
    <a-form-model
      :model="{}"
      ref="ruleForm"
      :rules="{}"
      @submit.native.prevent
    >
      <a-form-model-item
        :label="item.configName"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        prop="schoolName"
        v-for="(item, index) in info"
        :key="index"
      >
        <a-textarea :rows="6" v-model="item.configValue" v-if="item.configKey == 'activityDesc'" />
        <template v-else-if="item.configKey == 'activityCode'">
          <div style="display:flex;">
            <a-input size="large" v-model="item.configValue" disabled style="flex: 1"/>
            <a-button type="primary" @click="refreshActivity" size="large">更新活动</a-button>
          </div>
          <div style="display: flex;margin-top: 15px;">
            <qrcode-vue
              id="qrcodeBox"
              style="margin-right: 10px;width:200px;height: 200px;"
              :size="qrcodeVue.size"
              :value="qrcodeVue.value"
              :logo="qrcodeVue.logo"
              :bgColor="qrcodeVue.bgColor"
              :fgColor="qrcodeVue.fgColor"
            ></qrcode-vue>
            <a-button @click="downloadQrcode">下载二维码</a-button>
          </div>
        </template>
        <a-input size="large" v-model="item.configValue" v-else />
      </a-form-model-item>
      <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: center">
        <a-button
          htmlType="submit"
          type="primary"
          :loading="state.submitBtn"
          :disabled="state.submitBtn"
          @click="onSubmit"
        >保存</a-button>
        <a-button style="margin-left: 8px" @click="() => $router.go(-1)">取消</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
import qrcodeVue from 'qrcode-vue'

export default {
  name: 'GdConfig',
  components: {
    qrcodeVue
  },
  data() {
    return {
      id: this.$route.params.id || '',
      info: [],
      state: {
        submitBtn: false
      },
      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
      wrapperCol: { lg: { span: 10 }, sm: { span: 17 } },
      qrcodeVue: {
        size: 200,
        bgColor: '#fff',
        fgColor: '#000',
        value: '' // 二维码地址
      }
    }
  },
  created() {
    // 获取信息
    this.getInfo()
  },
  methods: {
    // 编辑信息
    async getInfo() {
      this.$common.handleGet('/gdzyz/getconfig').then((data) => {
        if (data.code === 200) {
          const result = data.data
          result.forEach(item => {
            if (item.configKey === 'activityCode') {
              this.qrcodeVue.value = item.configValue
            }
          })
          this.info = result
        } else {
          this.$message.error(data.message)
          // 跳转到目的路由
          this.$router.push({ name: 'GdSchoolList' })
        }
      })
    },

    // 更新活动
    refreshActivity() {
      this.$common.handlePost('/gdzyz/updatecode').then(data => {
        console.log(data.data)
        if (data.code === 200) {
          this.info.forEach(item => {
            if (item.configKey === 'activityCode') {
              item.configValue = data.data.activityCode
              this.qrcodeVue.value = item.configValue
            }
          })
        }
      })
    },

    downloadQrcode() {
      // 获取canvas标签
      const canvas = document.getElementById('qrcodeBox').getElementsByTagName('canvas')
      // 创建a标签
      const a = document.createElement('a')
      // 获取二维码的url并赋值为a.href
      a.href = canvas[0].toDataURL('img/png')
      // 设置下载文件的名字
      a.download = '活动二维码'
      // 点击事件，相当于下载
      a.click()
    },

    // 提交
    onSubmit() {
      const { state, handleFormData } = this
      state.submitBtn = true
      // 验证表单
      this.$refs.ruleForm.validate((valid) => {
        console.log(this.info)
        if (valid) {
          handleFormData('/gdzyz/updateconfig')
        } else {
          setTimeout(() => {
            state.submitBtn = false
          }, 600)
        }
      })
    },
    // 表单数据处理
    handleFormData(url) {
      var info = []
      this.info.forEach(item => {
        info.push({
          configKey: item.configKey,
          configValue: item.configValue
        })
      })
      this.$common
        .handlePost(url, info)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success(res.message)
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.$notification.error({
            message: '错误',
            description: '请求信息失败，请重试'
          })
        })
        .finally(() => {
          this.state.submitBtn = false
        })
    }
  }
}
</script>

<style lang="less">
#qrcodeBox img{
  width: 100%;
  height: 100%;
}
</style>
